<template>
	<view class="container">
		<view class="salesIndex-topBackImg">
			<!-- <view class="topStoreTag flex-row-plus">
				<view class="storeName overflow font-color-FFF">
					<image class="storeLogoImg" :src="item.shopLogo"></image>
				</view>
			</view> -->
			<view class="flex-items flex-column">
				<image class="salesHeadImg" :src="headImg"></image>
				<view class="font-color-FFF fs36 mar-top-10">{{name}}</view>
			</view>
			<view class="flex-items-plus awardTopInfo">
				<view class="flex-row-plus award-box flex-items flex-sp-around">
					<view class="flex-column-plus flex-items">
						<label class="fs50">{{SalesMainItem.settle}}</label>
						<label class="fs26 award">到账奖励(贡献）</label>
					</view>
					<view class="flex-column-plus flex-items">
						<label class="fs50">{{SalesMainItem.unSettle}}</label>
						<label class="fs26 award">在途奖励(贡献）</label>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-items-plus awardInfo">
			<view class="flex-row-plus award-box flex-items flex-sp-around">
				<view class="flex-column-plus flex-items">
					<label class="fs44 font-color-C5AA7B">{{SalesMainItem.promotion}}</label>
					<label class="fs24 font-color-333">累计好友(人）</label>
				</view>
				<view class="borRig-line-E5E5E5 lineRight" style="height: 44upx;"></view>
				<view class="flex-column-plus flex-items">
					<label class="fs44 font-color-C5AA7B">{{SalesMainItem.money}}</label>
					<label class="fs24 font-color-333">总流水(元）</label>
				</view>
			</view>
		</view>
		<view class="btnList">
			<view class="btnListBox flex-row-plus flex-items flex-sp-around">
				<view class="flex-column-plus flex-items" @click="jump('users')">
					<image class="salesIcon" :src="`${VUE_APP_STATIC_URL}static/images/salesOrderIcon.png`"></image>
					<label class="fs26 font-color-333">好友明细</label>
				</view>
				<view class="flex-column-plus flex-items" @click="jump('orders')">
					<image class="salesIcon" :src="`${VUE_APP_STATIC_URL}static/images/extendGoodsIcon.png`"></image>
					<label class="fs26 font-color-333">分享订单</label>
				</view>
				<view class="flex-column-plus flex-items" @click="handleShareSelect">
					<image class="salesIcon" :src="`${VUE_APP_STATIC_URL}static/images/inviteLowerIcon.png`"></image>
					<label class="fs26 font-color-333">邀请下级</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import {
		request
	} from '../../utils/request'
	import API from "../../config/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import {
		jump
	} from "@/utils/jumpUtil"
	import {
		onShow
	} from '@dcloudio/uni-app';
	const item = ref({})
	const SalesMainItem = ref({}) // 页面信息数据
	const headImg = ref('')
	const name = ref('')
	const appName = ref('')
	onLoad((options) => {
		headImg.value = uni.getStorageSync('storage_userInfo').headImage;
		name.value = uni.getStorageSync('storage_userInfo').name;
		getSalesMainInfo()
	})
	onShow(() => {
		nextTick(() => {
			appName.value = getApp().globalData.appName
		})
	})
	/**
	 * 获取页面信息数据
	 * @returns {Promise<void>}
	 */
	const getSalesMainInfo = async () => {
		try {
			const res = await request(API.promotionStatic, 'GET')
			uni.hideLoading()
			SalesMainItem.value = res.data
		} catch (err) {
			uni.hideLoading()
		}
	}
	/**
	 * 选择分享菜单后
	 * @param index
	 */
	function handleShareSelect() {
		uni.showLoading({
			mask: true,
			title: '请稍候...'
		})
		request(API.getAppSharePic, {
			terminal: getApp().globalData.terminal
		}, 'GET').then(res => {
			uni.hideLoading()
			if(!res.data.title) res.data.title = `【${appName.value}】好友邀请你一起来参与`
			jump(`/pages_category_page1/share/sharePic`,res.data)
		}).catch(err => {
			uni.hideLoading()
			throw Error(err)
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.container {
		.salesIndex-topBackImg {
			width: 100%;
			background: $mainColor;
			padding-top: 30upx;
			position: relative;

			.topStoreTag {
				background: #717171;
				height: 50upx;
				width: 180upx;
				border-radius: 20rpx 0 0 20rpx;
				position: absolute;
				right: 0;
				top: 50rpx;

				.storeName {
					height: 50upx;
					display: flex;
					align-items: center;
					margin-left: 5rpx;
				}

				.storeLogoImg {
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.salesHeadImg {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				border: 4rpx solid #FFF;
			}

			.gradeText {
				font-size: 26rpx;
				color: #FFFFFF;
				font-weight: 400;
				line-height: 36rpx;
				text-align: center;
				margin-top: 15upx;
				padding: 5upx 10upx;
				opacity: 0.7;
			}
		}

		.awardTopInfo {
			.award-box {
				height: 158upx;
				width: 690upx;
				margin-top: 30upx;

				label {
					color: #FDEDD3;
				}

				.award {
					color: #8A734A;
					width: 222rpx;
					height: 78rpx;
					line-height: 78rpx;
					background: linear-gradient(90deg, #FDEDD3 0%, #EDDABA 100%);
					text-align: center;
					margin-bottom: 28rpx;
				}

				.salesIcon {
					width: 60upx;
					height: 56upx;
				}
			}
		}

		.awardInfo {
			.award-box {
				height: 158upx;
				width: 690upx;
				margin-top: 30upx;
				background: #FFFFFF;

				.salesIcon {
					width: 60upx;
					height: 56upx;
				}
			}
		}

		.btnList {
			display: flex;
			width: 100%;
			margin-top: 30upx;
			flex-flow: wrap;
			justify-content: center;

			.btnListBox {
				background: #FFFFFF;
				height: 196upx;
				width: 690upx;
			}

			.salesIcon {
				width: 90rpx;
				height: 90rpx;
			}
		}
	}
</style>